﻿@{
    Layout = null;
}
<html>
<head>
    <title>校园图书管理系统</title>
    <!-- For-Mobile-Apps-and-Meta-Tags -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <!-- 引入样式 -->
    <link rel="stylesheet" href="/lib/element-ui/theme-chalk/index.min.css">
    <!-- 引入组件库 -->
    <script src="/lib/vue/dist/vue.min.js"></script>
    <script src="/lib/element-ui/index.min.js"></script>
    <script src="/lib/axios/axios.min.js"></script>
</head>
<body style="margin:10px;">
    <div id="app">
        <template>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>个人信息</el-breadcrumb-item>
            </el-breadcrumb>
            <table style="border:none;">
                <tr>
                    <td><el-image src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"></el-image></td>
                    <td>
                        <div style="border: solid 1px lightgray;width: 400px;padding: 5px;">
                        <el-descriptions title="用户信息" column="1" :model="user">
                            <el-descriptions-item label="用户名">{{user.UserName}}</el-descriptions-item>
                            <el-descriptions-item label="昵称">{{user.NickName}}</el-descriptions-item>
                            <el-descriptions-item label="原始密码">
                                <el-input placeholder="原始密码" v-model="user.Password" type="password" style="vertical-align:middle;width:200px;"></el-input>
                            </el-descriptions-item>
                            <el-descriptions-item label="重复密码">
                                <el-input placeholder="重复密码" v-model="user.ConfirmPassword" show-password  style="vertical-align:middle;width:200px;"></el-input>
                            </el-descriptions-item>
                            <el-descriptions-item label="新密码">
                                <el-input placeholder="新密码" v-model="user.NewPassword" show-password  style="vertical-align:middle;width:200px;"></el-input>
                            </el-descriptions-item>
                        </el-descriptions>
                        <el-button style="margin-left:10px;margin-top:5px;" v-on:click="handleSave">修改密码</el-button>
                        </div>
                    </td>
                </tr>
            </table>
           
            
        </template>
    </div>
    <script>
        var app= new Vue({
             el: '#app',
             data:function() {
               return {
                user:{
                   UserName:'',
                   NickName:'',
                   Password:'',
                   ConfirmPassword:'',
                   NewPassword:''
                },
                formLabelWidth: '120px',
               }
             },
             mounted:function(){
                this.handleGetUser();
             },
             methods: {
                 handleGetUser(){
                    var that =this;
                    axios.get('/User/GetPersonalInfo', {params:{}}).then(function (response) {
                        if(response.status==200){
                            var data = response.data;
                            that.user.UserName=data.userName;
                            that.user.NickName=data.nickName;
                            that.user.Password=data.password;
                        }
                        console.log(response);
                    }).catch(function (error) {
                        console.log(error);
                    });
                 },
                 handleSave(){
                    var that=this;
                    if(this.user.Password != this.user.ConfirmPassword){
                        that.$message({
                            type: 'success',
                            message: '原始密码和确认密码不对!'
                        });
                        return;
                    }
                    if(this.user.NewPassword==''){
                        that.$message({
                            type: 'success',
                            message: '新密码不可以为空!'
                        });
                        return;
                    }
                    //
                    axios.post('/Personal/UpdatePassword', {
                        UserName:this.user.UserName,
                        Password:this.user.Password,
                        ConfirmPassword:this.user.ConfirmPassword,
                        NewPassword:this.user.NewPassword,
                    }).then(function (response) {
                        if(response.status==200){
                            var msg = response.data;
                            console.log(msg);
                            if(msg.code=="0"){
                                //刷新页面
                                that.user.Password=that.user.NewPassword;
                                that.$message({
                                    type: 'success',
                                    message: '修改成功!'
                                  });
                            }else{
                                that.$message.error(msg.message);
                            }
                        }
                        console.log(response);
                    }).catch(function (error) {
                        that.$message.error(error);
                    });
                 }
             }
        });
    </script>
    <style>
        .el-descriptions-item__label{
            width:100px;
            margin-left:10px;
            line-height:30px;
        }
        .el-descriptions__title{
            margin-top:10px;
            margin-left:10px;
            font-size:26px;
        }
        .el-image{
            width: 368px;
            height: 368px;
        }
    </style>

</body>
</html>

